<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>@your friend to playing</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no" />
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd {margin:0;padding:0;}
body {font:normal 62.5%/1.2 Arial,Helvetica,sans-serif;color:#333;background:#2c2c2c;height:800px;}
li{list-style:none;}
/*border style*/
.textMsgBox,.layerMenuList{border:#242424 solid 1px;border-top:#ccc solid 1px;border-left:#ccc solid 1px;}

#container{font-size:1.2em;width:978px;height:600px;margin:0 auto;position:relative;}
#txtMsg{padding:10px 0;}
.textMsgBox{width:360px;height:60px;display:none;}
.boximitate{width:360px;height:60px;opacity:0;position:absolute;top:10px;left:0;z-index:-999;word-break:break-all;}
.layerMenuList{position:absolute;padding:2px 2px 6px;background:#fff;display:none;font-size:1.2em;}
.layerMenuList li{padding:4px 6px;color:#999;}
.layerMenuList li.tit{color:#666;}
.layerMenuList li.current{background:#eee;color:#333;}
.dns{font:3.6em/1.6 lapture-display-1,lapture-display-2,Palatino,Georgia,serif;color:#eee;text-transform: uppercase;width:600px;margin:0 auto;text-align:center;}
.fSD{font-famliy:"SabonNextW01-DisplayIta",serif;}
-->
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div id="container">
<div id="txtMsg">
  <textarea class="textMsgBox"></textarea>
</div><!--#txtMsg::E-->
<!--<div class="dns fSD">
	flyxiang.me
</div>-->
<div class="boximitate">
	<span class="before"></span>
    <span class="flag"></span>
    <span class="after"></span>
</div><!--.boximitate::E-->
</div><!--#container::E-->
<div class="layerMenuList">
  <ul>
    <li node-type="title" class="tit">@YOUR FRIEND 送歌</li>
    <li node-type="item">Flyxiang</li>
    <li node-type="item" class="current">小MM</li>
    <li node-type="item">巴士哥哥</li>
    <li node-type="item">巴士妹妹</li>
  </ul>
</div><!--.layerMenuList::E-->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
	$('.textMsgBox').bind('keyup', function(){
		var $self = $(this);
		var $offset = $self.offset();
		var x = $offset.top;
		var y = $offset.left;
		var $result = $('.layerMenuList');
		var $boximitate =$('.boximitate');
		var before = $boximitate.find('.before');
		var flag = $boximitate.find('.flag');
		var after = $boximitate.find('.after')
		var $val = $self.val();
		var last = $val.lastIndexOf('@');
		var first = $val.indexOf('@');
		if($val && last >= 0){
			if(last > first){
				var key = $val.substring(last+1);
			}
			if(last == first)  {
				arr = $val.split('@');
				if(arr[1]) var key = arr[1]; 
        	}
			if(!key){
			   flag.text('@');
			   before.text($val);
			   $result.css({'top': x+before.height(), 'left': y+before.width()});
			}
			if(key&&(key.length>0)){
				after.text(key);
				$result.show()
			}
		}
	});
	
	function c1(a, b){
		console.log("hello");
	}
	function c2(a, b){
		//console.log(a-b);
		c1.call(this);
	}
	c2();
	
	window.onscroll = function(){
		var doc = document;
		var docB = doc.body;
		var docG = doc.documentElement;
		var top = docB.scrollTop + docG.scrollTop;
		var tH = docB.scrollHeight + docG.scrollHeight;
		var cH = docB.clientHeight + docG.clientHeight;
		if(tH - top - cH == 0){
			docB.scrollTop = 0;
		}
	}
	var a = 2;
	var b = 2;
	(function(c,d){
		c();
	})(c1,b)
</script>
<noscript>your browser not support javascript</noscript>
</body>
</html>
